<template>
  <div class="scheduleTemplate">
    <p>{{$t('statement.staf')}}</p>
    <div class="prewive">
      <span>{{$t('statement.tpwre')}}</span>
      <span class="numRecord">{{dataForm[scriptItem.text][scriptItem.number]}}</span>
      <span>{{translateRepeat()}}&nbsp;</span>
      <span>{{$t('statement.sf')}}</span>
      <span class="dateRecord">{{formatDate(dataForm[scriptItem.text][scriptItem.dates]) }} {{formatTime(dataForm[scriptItem.text][scriptItem.times])}}</span>
    </div>
    <div style="margin: 5px;">
      <div :span="4">{{$t('attribute.starting')}}<em /></div>
      <div :span="20">
        <el-date-picker style="width: 50%"
                        v-model="dataForm[scriptItem.text][scriptItem.dates]"
                        format="MM/dd/yy"
                        :clearable="false"
                        :default-value="new Date()"
                        type="date">
        </el-date-picker>
        <span>&nbsp;&nbsp;&nbsp;at&nbsp;&nbsp;&nbsp;</span>
        <el-time-picker v-model="dataForm[scriptItem.text][scriptItem.times]"
                        :clearable="false"
                        style="width: 8rem"
                        :default-value="new Date()"
                        :picker-options="{ format:'HH:mm:ss A' }">
        </el-time-picker>
      </div>
    </div>
    <div style="margin:0px 5px 5px 5px;">
      <div :span="4">{{$t('statement.re')}} <em /></div>
      <div :span="20">
        <el-input-number size="small"
                         :min="comNumberArea.min"
                         :max="comNumberArea.max"
                         style="left: 0;width: 31.5%;"
                         v-model="dataForm[scriptItem.text][scriptItem.number]"
                         @change="numberChange"
                         :step='1'
                         step-strictly
                         controls-position="right"></el-input-number>
        <el-select style="width: 8rem;margin-left: 15px"
                   v-model="dataForm[scriptItem.text][scriptItem.dateValue]"
                   @change="dateValueChange">
          <el-option v-for="item in options"
                     :key="item.label"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- <span style="display: inline-block;font-weight: bolder">This flow will run:</span> &nbsp;&nbsp;&nbsp;
    <span>Every {{dataForm[scriptItem.text][scriptItem.number]}} {{options[dataForm[scriptItem.text][scriptItem.dateValue]].label}}</span> -->
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import moment from 'moment'
import { GlobalTimeformat } from '@/utils/common'
export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      options: [
        { label: 'Month', value: '0' },
        { label: 'Week', value: '5' },
        { label: 'Day', value: '1' },
        { label: 'Hour', value: '2' },
        { label: 'Minute', value: '3' }
        // { label: 'Second', value: '4' }
      ]
    }
  },
  watch: {
    dataForm: {
      handler: function (val) {
        if (val[this.scriptItem.text][this.scriptItem.dates] === '') {
          val[this.scriptItem.text][this.scriptItem.dates] = new Date()
        }
        if (val[this.scriptItem.text][this.scriptItem.times] === '') {
          val[this.scriptItem.text][this.scriptItem.times] = new Date()
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    comNumberArea () {
      let temp = {
        min: 1,
        max: 1
      }
      switch (this.dataForm[this.scriptItem.text][this.scriptItem.dateValue]) {
        case '0':
          temp['min'] = 1
          temp['max'] = 12
          break
        case '1':
          temp['min'] = 1
          temp['max'] = 31
          break
        case '2':
          temp['min'] = 1
          temp['max'] = 23
          break
        case '3':
          temp['min'] = 1
          temp['max'] = 59
          break
        case '4':
          temp['min'] = 1
          temp['max'] = 59
          break
        case '5':
          temp['min'] = 1
          temp['max'] = 4
          break
      }
      return temp
    }
  },
  mounted () { this.numberChange(1) },
  methods: {
    translateRepeat () {
      let className = ''
      switch (this.dataForm[this.scriptItem.text][this.scriptItem.dateValue]) {
        case '0':
          className = 'Month'
          break
        case '1':
          className = 'Day'
          break
        case '2':
          className = 'Hour'
          break
        case '3':
          className = 'Minute'
          break
        case '5':
          className = 'Week'
          break
        default: className = 'iconnull_type'
          break
      }
      return className
    },
    numberChange (e) {
      if (!e) {
        this.$nextTick(() => {
          this.dataForm[this.scriptItem.text][this.scriptItem.number] = 1
        })
      }
      this.dataForm[this.scriptItem.text][this.scriptItem.cornstr] = this.getCronExpress(this.dataForm[this.scriptItem.text][this.scriptItem.dateValue])
    },
    dateValueChange (e) {
      if (this.comNumberArea.min >= this.dataForm[this.scriptItem.text][this.scriptItem.number] && this.dataForm[this.scriptItem.text][this.scriptItem.number] <= this.comNumberArea.max) {
        this.dataForm[this.scriptItem.text][this.scriptItem.cornstr] = this.getCronExpress(e)
      } else {
        if (this.comNumberArea.min > this.dataForm[this.scriptItem.text][this.scriptItem.number]) {
          this.dataForm[this.scriptItem.text][this.scriptItem.number] = this.comNumberArea.min
        }
        if (this.comNumberArea.max < this.dataForm[this.scriptItem.text][this.scriptItem.number]) {
          this.dataForm[this.scriptItem.text][this.scriptItem.number] = this.comNumberArea.max
        }
      }
      this.$nextTick(() => {
        this.dataForm[this.scriptItem.text][this.scriptItem.cornstr] = this.getCronExpress(e)
      })
    },
    getCronExpress (e) {
      let str = 'S I H D M ? *'
      switch (e) {
        case '0':
          str = `${this.getNum('S')} ${this.getNum('I')} ${this.getNum('H')} ${this.getNum('D')} */${this.dataForm[this.scriptItem.text][this.scriptItem.number]} ? *`
          break
        case '1':
          str = `${this.getNum('S')} ${this.getNum('I')} ${this.getNum('H')} */${this.dataForm[this.scriptItem.text][this.scriptItem.number]} * ? *`
          break
        case '2':
          str = `${this.getNum('S')} ${this.getNum('I')} */${this.dataForm[this.scriptItem.text][this.scriptItem.number]} * * ? *`
          break
        case '3':
          str = `${this.getNum('S')} */${this.dataForm[this.scriptItem.text][this.scriptItem.number]} * * * ? *`
          break
        case '4':
          str = `*/${this.dataForm[this.scriptItem.text][this.scriptItem.number]} * * * * ? *`
          break
        case '5':
          str = `${this.getNum('S')} ${this.getNum('I')} ${this.getNum('H')} */${this.dataForm[this.scriptItem.text][this.scriptItem.number] * 7} * ? *`
          break
      }
      return str
    },
    getNum (type) {
      const startDates = this.dataForm[this.scriptItem.text][this.scriptItem.dates]
      const startTimes = this.dataForm[this.scriptItem.text][this.scriptItem.times]
      const day = new Date(startDates).getDate() || 0
      const hour = new Date(startTimes).getHours() || 0
      const minutes = new Date(startTimes).getMinutes() || 0
      const second = new Date(startTimes).getSeconds() || 0
      const month = new Date(startTimes).getMonth() + 1 || 1
      let tempStr = ''
      switch (type) {
        case 'S':
          tempStr = second
          break
        case 'I':
          tempStr = minutes
          break
        case 'H':
          tempStr = hour
          break
        case 'D':
          tempStr = day
          break
        case 'M':
          tempStr = month
          break
        default:
          break
      }
      return tempStr
    },
    formatDate (time) {
      return GlobalTimeformat(time)
    },
    formatTime (time) {
      if (time) {
        return moment.tz(time, this.$store.state.user.timezoneId).format('HH:mm:ss') + ' ' + moment.tz(time, this.$store.state.user.timezoneId).format('zz')
      } else {
        return ''
      }
    }
  },
  create () {
    this.numberChange(this.dataForm[this.scriptItem.text][this.scriptItem.number])
    this.dateValueChange(this.dataForm[this.scriptItem.text][this.scriptItem.dateValue])
  }
}
</script>

<style lang='scss'>
.scheduleTemplate {
  p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #7f7f7f;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .prewive {
    height: 48px;
    background: #e6f7ff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #138dc7;
    line-height: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    .numRecord {
      display: inline-block;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #138dc7;
      padding: 0 5px;
    }
    .dateRecord {
      margin-left: 10px;
      display: inline-block;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #138dc7;
    }
  }
  em::before {
    content: " *";
    color: #e02020;
    padding-right: 12px;
  }
  .el-row {
    .el-col:nth-child(1) {
      width: 18%;
    }
    .el-col:nth-child(2) {
      display: flex;
      width: 80%;
    }
  }
}
</style>
